<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #d2{
        height: 400px;
        border: 1px red solid;
        color: red;
        cursor: crosshair;//改变鼠标（光标）外观
    }
</style>
<body>
<div onmousemove="move(event)" id="d2">
    坐标(0,0)
</div>
</body>
<script>
    function move(e) {
        let div = document.createElement('div');
        e.target.innerHTML=('X:'+e.clientX+',Y:'+e.clientY)

        div.width = 40;
        div.style.border = "1px blue solid";
        div.style.position = 'absolute';
        div.style.marginLeft = e.clientX - 6 + 'px';
        div.style.marginTop = e.clientY - 27 + 'px';
        div.innerHTML = ('X:'+e.clientX+',Y:'+e.clientY);

        document.getElementById('d2').appendChild(div)
    }
</script>
</html>